<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器的优先级</title>
    <style>
      /* 
        多个样式作用于同一个标签
        - 如果样式不同，则叠加
        - 如果样式相同，则用优先级高的，如果优先级别相等则就近

       !important > 行内 > 类选择器 > 标签选择器
      */
      div {
        color: red !important;
      }
      .box2 {
        color: blueviolet;
        font-size: 30px;
      }
      .box1 {
        color: goldenrod;
        font-size: 20px;
      }
      * {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <div class="box1 box2" style="color: orange">今天天气很好呀哈哈哈</div>
    <p>明天天气很好的呀嘻嘻嘻</p>
    <div>后天天气很好啊嘿嘿嘿</div>
  </body>
</html>
